<template>
    <!-- 留言板 -->
    <div>
        <!-- 留言框：内容长度控制在10字之内 -->
        <el-input v-model.trim="content" placeholder="留言信息" type="textarea" :maxlength="maxlength" show-word-limit  @keyup.native.13="submit"></el-input>
        <!-- 按钮：判断不许为空，长度不超过10个 -->
        <el-row :gutter="10" style="margin-top: 10px;margin-bottom: 10px;">
            <el-col :span="2" :offset="22">
                <el-button type="primary" @click="submit">提交</el-button>
            </el-col>
        </el-row>
        <!-- 展示列表：请求回来的数据 -->
        <el-card v-for="(item) in words" :key="item.id">
            <div slot="header">
                <el-row :gutter="10">
                    <el-col :span="2">
                        <!-- 头像 -->
                         <el-avatar :size="90" :src="item.headIoc"></el-avatar>
                    </el-col>
                    <el-col :span="4">
                        <!-- 昵称 -->
                        <h4>{{item.name}}</h4>
                        <!-- 时间 -->
                        <p>{{item.date}}</p>
                    </el-col>
                </el-row>
            </div>
            <div class="card-body">
                <h5 v-html="item.content"></h5>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    mounted(){
        
    },
    data(){
        return {
            maxlength:10,
            //输入框的文本
            content:'',
            //留言的数据集合
            words:[
                {id:1,//后端生成的
                headIoc:'https://img2.woyaogexing.com/2020/12/05/65dfaa9731b4404aaf20d7592c55655d!400x400.jpeg',name:'king',date:'2020-12-08',content:'你什么时候见我？',}
            ]
        }
    },
    methods:{
        //提交留言
        submit(){
            //1.校验--不许为空，不许超过10个字符
            if(this.content.length > this.maxlength || !this.content){
                return this.$message({
                    message: '抱歉您不能提交',
                    type: 'error'
                })
            }
            //2.假装-Ajax请求提交数据
            const date =this.fromatdate()
            this.words.unshift({
                id:date,
                date,
                name:'王璐珂',
                content:this.content,
                headIoc:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3649178992,1821853682&fm=26&gp=0.jpg',
            })
            this.content=''
            //3.接口如果返回成功，再次请求获取留言数据的接口
        },
        //请求留言数据
        getWords(){
            //ajax获取留言数据
        },
        //获取格式化后的当前时间
        fromatdate(){
            const day=new Date()
            const Y=day.getFullYear()
            const M=day.getMonth()+1
            const d=day.getDate()
            const h=day.getHours()
            const m=day.getMinutes()
            const s=day.getSeconds()
            return `${Y}-${M}-${d} ${h}:${m}:${s}`;
        }
    },
    watch:{
        content(value){
            if(value.trim().length >= this.maxlength){
                this.$message({
                    message: `您已输入到最大长度${this.maxlength}位字符`,
                    showClose:true,
                    type: 'waning'
                })
            }
        }
    },
}
</script>